{extend name='base' /}

{block name='main'}
<div class="main-panel">
    <div class="content">
        <div class="page-inner">
            <div class="page-header">
                <h4 class="page-title">Dashboard</h4>
                <div class="btn-group btn-group-page-header ml-auto">
                    <button type="button" class="btn btn-light btn-round btn-page-header-dropdown dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-ellipsis-h"></i>
                    </button>
                    <div class="dropdown-menu">
                        <div class="arrow"></div>
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body ">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-primary bubble-shadow-small">
                                        <i class="fas fa-users"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ml-3 ml-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">用户数</p>
                                        <h4 class="card-title">{$user_count}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-info bubble-shadow-small">
                                        <i class="far fa-newspaper"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ml-3 ml-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">订单数</p>
                                        <h4 class="card-title">{$order_count}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-success bubble-shadow-small">
                                        <i class="far fa-chart-bar"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ml-3 ml-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">订单金额</p>
                                        <h4 class="card-title">{$order_money}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-secondary bubble-shadow-small">
                                        <i class="far fa-check-circle"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ml-3 ml-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">待归还数</p>
                                        <h4 class="card-title">{$borrow_count}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row row-card-no-pd">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-head-row">
                                <h4 class="card-title">统计报表</h4>
                            </div>
                            <div class="form-group form-inline">
                                <div class="col-md-12 p-0">
                                    <select class="form-control" id="order-year">
                                        {foreach $year as $k => $v}
                                        <option value="{$v}">{$v}年</option>
                                        {/foreach}
                                    </select>
                                    <select class="form-control" id="order-month">
                                        <option value="">选择月</option>
                                        {for start="1" end="12"}
                                        <option value="{$i}" {if $i==$month}selected{/if}>{$i}月</option>
                                        {/for}
                                    </select>
                                    <button type="button" class="btn btn-success" onclick="create();">生成报表</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body" id="canvas-box">
                            <canvas id="myChart" style="height: 400px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    var myChart;
    $(function () {
        create();
    });
    function create() {
        if (myChart) {
            myChart.clear();
            $("#myChart").remove();
            let cdom = document.createElement('canvas');
            cdom.setAttribute('id', 'myChart');
            cdom.style.height = '400px';
            $("#canvas-box").append(cdom);
        }

        var ctx = document.getElementById('myChart').getContext('2d');
        let year = $("#order-year").val();
        let month = $("#order-month").val();
        $.get("{:url('index/data')}?year="+year+"&month="+month, function (res) {
            myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: res.data.labels,
                    datasets: res.data.datasets,
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        }, 'json');
    }
</script>
{/block}